/*
 * @Author: xiaosihan 
 * @Date: 2023-10-21 17:33:29 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-03 18:29:36
 */


import { Button, Input, Select, Tooltip, Upload } from "antd";
import { isArray } from "lodash";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import { SketchPicker } from "react-color";
import styles from "./goodsColors.module.less";
import { GoodsData } from "#/type";
import utils from "@/utils/utils";
import utilsServer from "@/api/services/utilsServer";

interface Iprops {
  colors: GoodsData["colors"];
  frontPrintImg: string;
  backPrintImg: string;
  changed: (color: GoodsData["colors"]) => void;
}

// 商品颜色
export default function GoodsColors(props: Iprops) {

  const [colorNames, setColorNames] = useState<Array<string>>([]);

  useEffect(() => {
    // 获取所有配置
    utils.getAllProperty().then((res) => {
      setColorNames(res.color);
    });
  }, [])

  const defaultColors: GoodsData["colors"] = [{
    color: "#ffffff",
    "cn": "白色",
    "en": "白色",
  }];

  const [colors, setColors] = useState<GoodsData["colors"]>([]);

  useEffect(() => {
    if (isArray(props.colors)) {
      setColors(props.colors);
    } else {
      setColors(defaultColors);
      props.changed(colors);
    }
  }, [props.colors]);

  useEffect(() => autorun(() => {

  }), []);

  //删除颜色
  const del_color = (i: number) => {
    colors.splice(i, 1);
    setColors([...colors]);
    props.changed(colors);
  }

  //新增颜色
  const add_color = () => {
    colors.push({
      color: "#ffffff",
      "cn": "白色",
      "en": "白色",

    });
    setColors([...colors]);
    props.changed(colors);
  }

  return (
    <div className={styles.goodsColors} >
      <div>商品颜色:&nbsp;</div>
      {
        (isArray(colors) ? colors : []).map((c, i) => {
          return (
            <div
              key={i}
              className={styles.color}
            >
              <Upload
                name="avatar"
                accept=".jpg,.jpeg,.png,.tga,.webp"
                listType="picture-card"
                showUploadList={false}
                className={styles.img}
                customRequest={async ({ file }) => {
                  const url = await utilsServer.uploadOss(file as File);
                  if (url) {
                    colors[i].frontImg = url;
                    setColors(colors);
                    props.changed(colors);
                  }
                }}
              >
                <div className={styles.img} >
                  <div className={styles.clothImg} >
                    {c.frontImg ?
                      <img
                        src={utils.ossSuffix(c.frontImg, 230)}
                        className={styles.frontClothImg}
                      /> : "拖入上传前面图"
                    }
                    {
                      props.frontPrintImg &&
                      <img
                        src={props.frontPrintImg}
                        className={styles.markImg}
                      />
                    }
                  </div>

                </div>

              </Upload>

              <Upload
                name="avatar"
                accept=".jpg,.jpeg,.png,.tga,.webp"
                listType="picture-card"
                showUploadList={false}
                className={styles.img}
                customRequest={async ({ file }) => {
                  const url = await utilsServer.uploadOss(file as File);
                  if (url) {
                    colors[i].backImg = url;
                    setColors(colors);
                    props.changed(colors);
                  }
                }}
              >
                {
                  <div className={styles.img} >
                    <div className={styles.clothImg} >
                      {
                        c.backImg ?
                          <img
                            src={utils.ossSuffix(c.backImg, 230)}
                            className={styles.frontClothImg}
                          /> : "拖入上传背面图"
                      }
                      {
                        props.backPrintImg &&
                        <img
                          src={props.backPrintImg}
                          className={styles.markImg}
                        />
                      }
                    </div>

                  </div>

                }
              </Upload>

              <Tooltip
                title={
                  <SketchPicker
                    color={c.color}
                    onChange={(color: any) => {
                      colors[i].color = color.hex as `#${string}`;
                      setColors([...colors]);
                      props.changed(colors);
                    }}
                  />
                }
                trigger={['click']}
                color="#ffffff"
                placement="bottom"
              >
                <span
                  className={styles.colorBlock}
                  style={{ backgroundColor: c.color }}
                >
                </span>
              </Tooltip>
              <div className={styles.names} >
                <Select
                  className={styles.input}
                  defaultValue={c["cn"]}
                  onChange={(value: string) => {
                    colors[i]["cn"] = value;
                    setColors([...colors]);
                    props.changed(colors);
                  }}
                >
                  {
                    colorNames.map((item: string) => {
                      return <Select.Option key={item} value={item}>{item}</Select.Option>
                    })
                  }
                </Select>
                {/* 中文 */}
                {/* <Input
                  key={c["cn"] + "CN"}
                  size="small"
                  addonBefore="中文"
                  className={styles.input}
                  defaultValue={c["cn"]}
                  onBlur={e => {
                    colors[i]["cn"] = e.target.value;
                    setColors([...colors]);
                    props.changed(colors);
                  }}
                /> */}
                {/* 英文 */}
                {/* <Input
                  key={c["en"] + "EN"}
                  addonBefore="英文"
                  size="small"
                  className={styles.input}
                  defaultValue={c["en"]}
                  onBlur={e => {
                    colors[i]["en"] = e.target.value
                    setColors([...colors]);
                    props.changed(colors);
                  }}
                /> */}
              </div>
              {/* 删除 */}
              <Button
                size="small"
                type="primary"
                danger
                onClick={() => del_color(i)}
                className={styles.del_btn}
              >删除</Button>
            </div>
          )
        })
      }
      <Button
        type="primary"
        className={styles.add_btn}
        onClick={add_color}
      >新增颜色</Button>
    </div >
  );

}